import 'package:flutter/material.dart';

import 'package:get/route_manager.dart';

import 'clipped_view.dart';
import 'navbar_button.dart';

class NavBar extends StatefulWidget {
  final ValueChanged<int> itemTapped;

  final List<NavBarItemData> items;

  const NavBar({this.items, this.itemTapped});

  // NavBar({Key key}) : super(key: key);

  @override
  _NavBarState createState() => _NavBarState();
}

class _NavBarState extends State<NavBar> {
  int currentIndex = 0;
  NavBarItemData get selectedItem =>
      currentIndex >= 0 && currentIndex < widget.items.length
          ? widget.items[currentIndex]
          : null;
  @override
  Widget build(BuildContext context) {
    //For each item in our list of data, create a NavBtn widget
    List<Widget> buttonWidgets = widget.items.map((data) {
      //Create a button, and add the onTap listener
      return NavbarButton(data, data == selectedItem, onTap: () {
        //Get the index for the clicked data
        var index = widget.items.indexOf(data);
        //Notify any listeners that we've been tapped, we rely on a parent widget to change our selectedIndex and redraw
        print(index);
        setState(() {
          currentIndex = index;
          Get.toNamed(index == 0 ? '/home' : '/option');
        });
      });
    }).toList();

    //Create a container with a row, and add our btn widgets into the row
    return Container(
      decoration: BoxDecoration(
        color: Colors.red,
        //Add some drop-shadow to our navbar, use 2 for a slightly nicer effect
        boxShadow: [
          BoxShadow(blurRadius: 16, color: Colors.black12),
          BoxShadow(blurRadius: 24, color: Colors.black12),
        ],
      ),
      alignment: Alignment.center,
      height: 80,
      //Clip the row of widgets, to suppress any overflow errors that might occur during animation
      child: ClippedView(
        child: Row(
          //Center buttons horizontally
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          // Inject a bunch of btn instances into our row
          children: buttonWidgets,
        ),
      ),
    );
  }
}

class NavBarItemData {
  final String title;
  final IconData icon;
  final Color selectedColor;
  final double width;

  NavBarItemData(this.title, this.icon, this.width, this.selectedColor);
}
